---
title: "Codemod Studio"
sidebarTitle: 'Studio'
icon: "wrench"
---

import { CodemodStudioDemo } from "/snippets/codemod-studio-demo.mdx";

[Codemod Studio](https://go.codemod.com/studio) lets you describe a change in plain language and have **Codemod AI** turn it into a working codemod. The assistant suggests test cases, generates a YAML ast-grep rule or a JS ast-grep (jssg) script when needed, and iterates with you until the transformation behaves as expected.

By leveraging advanced AI technologies and deterministic software engineering tools, Codemod AI significantly improves the accuracy and efficiency of autogenerated codemods.

<Frame>
  <CodemodStudioDemo />
</Frame>

This guide shows you how to build codemods using Codemod Studio. During this process, you will learn different concepts such as:

- [Navigating Codemod Studio](#navigating-codemod-studio)
- [Using Codemod AI](#using-codemod-ai)
- [Running codemods](#running-codemods)

## Navigating Codemod Studio

### Adding/Inspecting test cases

Test cases allow you to see how your codemod affects different code patterns. In Codemod Studio, you can:

- Add test cases
- Inspect a test case's abstract syntax tree (AST)
- Inspect the diff view of how your codemod affects the test case
- Inspect the matched code patterns

<video autoPlay loop className="w-full aspect-video" src="/images/codemod-studio/using-test-case.mp4" />

### Selecting language
Codemod Studio runs on top of [ast-grep](https://ast-grep.github.io/), a lightning-fast tool for structural code search, linting, and rewriting across multiple languages.

<video autoPlay loop className="w-full aspect-video" src="/images/codemod-studio/selecting-languages.mp4" />

### Sharing codemods

After building a codemod, you can share and test your codemods with friends, team members, and the community.

<video autoPlay loop className="w-full aspect-video" src="/images/codemod-studio/share-codemod.mp4" />

### Managing sessions

Codemod Studio allows you to save and use multiple sessions. This helps make working on several codemods at once more manageable.

<video autoPlay loop className="w-full aspect-video" src="/images/codemod-studio/managing-sessions.mp4" />

## Using Codemod AI

The AI assistant provides support and guidance throughout the codemod creation process. It leverages AI to help you generate codemod scripts, troubleshoot issues, and refine code transformations.

<video autoPlay loop className="w-full aspect-video" src="/images/codemod-studio/generate-codemod.mp4" />

To use Codemod AI, you can:

<Steps>
  <Step title="Open Codemod AI">
    Click `Ask Codemod AI` to open the AI helper pane.
  </Step>
  <Step title="Prompt required changes">
    Prompt the change(s) for which you want to build a codemod. Try to focus on building codemods for a few granular changes at a time. Packing too many changes into one codemod significantly increases the chance of broken outputs.
  </Step>
  <Step title="Inspect test cases">
    Codemod AI will understand your prompt and recommend extra test cases that may improve coverage. You can inspect the generated test cases and make sure that the codemod you built transforms these test cases correctly.
  </Step>
  <Step title="Iterate and improve">
    If the codemod is not perfect on the first try, you can iterate and improve the codemod with the help of Codemod AI until you reach a satisfactory result.
  </Step>
</Steps>

## Running codemods

Codemod Studio allows you to run codemods over your codebases without having to leave your web environment.

<video autoPlay loop className="w-full aspect-video" src="/images/codemod-studio/running-codemod.mp4" />

To run codemods, you can:

<Steps>
  <Step title="Choose target repository">
    Make sure you are logged into Codemod using your GitHub account and pick a target repository.
  </Step>
  <Step title="Run codemod">
    Click `Run` to start running your codemod. Note that this will only dry-run the codemod and will not directly affect your codebase.
  </Step>
  <Step title="Inspect changes">
    You can click on each affected file and inspect the diff view of the changes made. If you catch any false positives or false negatives, you can go back to Codemod AI and iteratively improve your codemod.
  </Step>
</Steps>

<Info>
  Prefer running codemods from your terminal or CI? See our [CLI](/cli/cli-reference) guide for scripting and automating codemods locally or in CI.
</Info>

## Tips for building better codemods

1. **Clarity is Key**: Try to prompt clear requirements when using Codemod AI. Ensure that the transformation logic is clear for both humans and AI. Well-defined logic leads to more accurate codemods.
2. **Follow the MECE Principle:** When designing test cases, aim for them to be Mutually Exclusive and Collectively Exhaustive (MECE). This means:

   - **Mutually Exclusive:** Each test case should cover a unique scenario without overlap. Ideally, you only need one clear example with a proper description for each pattern. Break down complex transformations into smaller, more manageable parts.
   - **Collectively Exhaustive:** Together, your test cases should cover all possible scenarios for the codemod.

   For example, if you're writing a codemod to update function syntax:
   - Test case 1: Regular function to arrow function
   - Test case 2: Function with parameters
   - Test case 3: Function with default parameters
   - Test case 4: Async function

   Each case covers a distinct scenario, and together they cover a wide range of function types.
3. **Balance Simplicity and Complexity**: While it's possible to create complex transformation logics that support all cases, simpler, more focused codemods are often more maintainable and easier to understand.

### Example of a good Codemod AI prompt

Codemod AI works best with a clear description of the change you want. Code examples are optional but often improve accuracy. The following prompt—description plus minimal before/after snippets—generates [this codemod](https://app.codemod.com/studio?share_id=cb9b5202314548d682cbd7):

````
Replace explicit <React.Fragment> tags with shorthand fragments.

Before:
```
<React.Fragment>
  <Header />
  <Main />
</React.Fragment>
```

After:
```
<>
  <Header />
  <Main />
</>
```

Note:
- Transform only fragments **with no props**.  
- Skip any <React.Fragment> that carries a prop such as `key`, `children`, etc.  
- Do not alter indentation, surrounding code, or formatting beyond the tag swap.
````

<Tip>
  **Why this is a good prompt?**

  This prompt states one atomic transformation, shows concrete before/after examples, and spells out the minimal extra edits required—exactly what the _Clarity is Key_ and _Balance Simplicity and Complexity_ tips recommend.
</Tip>
